<html>
	<head>
		<title>Create User</title>
		<link rel="stylesheet" href="../css/style.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
	</head>
	<body class="claro">
		<script>dojoConfig = {parseOnLoad: true}</script>
		<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button",
				"dijit/form/TextBox", "dojo/keys", "dojo/request", "dijit/focus", "dojo/dom", "dojox/form/PasswordValidator"], 
				function(ready, BorderContainer, ContentPane, Button, TextBox, keys, request, focusUtil, dom, PasswordValidator){
					ready(function() {
						var bc = new BorderContainer({style: "width: 100%; height: 100%", gutters: false});
						var center = new ContentPane({
							region: "center",
							content: ""});
						var top = new ContentPane({
							region: "top",
							style: "height: 40%;",
							content: ""});
						var leading = new ContentPane({
							region: "leading",
							style: "width: 40%;",
							content: ""});
						var trailing = new ContentPane({
							region: "trailing",
							style: "width: 40%;",
							content: ""});
						bc.addChild(center);
						bc.addChild(top);
						bc.addChild(leading);
						bc.addChild(trailing);
						var username = new TextBox({
							id: "username",
							name: "username",
							placeholder: "Username",
							style: "width: 100%;",
							value: "",
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB) {
									focusUtil.focus(dom.byId("password"));
								}
							}});
						var password = new PasswordValidator({
							id: "password",
							name: "password",
							placeholder: "Password",
							pwType: "new",
							style: "width: 100%",
							type: "password",
							value: "",
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB){
									focusUtil.focus(dom.byId("verify"));
								}
							}});
						var verify = new PasswordValidator({
							id: "verify",
							name: "verify",
							placeholder: "Verify",
							pwType: "verify",
							style: "width: 100%",
							type: "password",
							value: "",
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB){
									focusUtil.focus(dom.byId("name"));
								}
							}});
						var name = new TextBox({
							id: "name",
							name: "name",
							placeholder: "Name",
							style: "width: 100%;",
							value: "",
							onKeyPress: function(e){
								focusUtil.focus(dom.byId("email"));
							}});
						var email = new TextBox({
							id: "email",
							name: "email",
							placeholder: "Email Address",
							style: "width: 100%",
							value: "",
							onKeyPress: function(e){
								if ( e.keyCode == keys.TAB ){
									focusUtil.focus(dom.byId("createUser"));
								}
							}});
						var createUser = new Button({
							id: "createUser",
							name: "createUser",
							label: "Create User",
							//style: "width: 45%;",
							onClick: function(){
								
							},
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB){
									focusUtil.focus(dom.byId("cancel"));
							}}});
							
						var cancel = new Button({
							id: "cancel",
							name: "cancel",
							label: "Cancel",
							//style: "width: 45%;",
							onClick: function(){
								window.location = "/";
							}, 
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB){
									focusUtil.focus(dom.byId("username"));
								}
							}});
						center.set("content", [
							username.domNode,
							password.domNode,
							verify.domNode,
							name.domNode,
							email.domNode,
							createUser.domNode,
							cancel.domNode]);
						document.body.appendChild(bc.domNode);
						bc.startup();
					});
				});
		</script>
	</body>
</html>